<template>
  <div>

    <div style="height:60px;padding: 0 1.2rem;" class="row container">

      <router-link :to="{ path: '/', query: {}}" class="col-2 text-left">
        <img src="../../../static/img/logo.png" alt="logo" style="width:70px;">
      </router-link>
      <div class="col-4">
      </div>
     <div v-if="lslogin === 1" class="col-6 text-right"  style="padding-top:25px;">
        <p class="small">用户 {{userinfo.username.substring(0,2)}}***{{userinfo.username.substring(9,11)}} <span @click="loginout">[退出]</span> </p>
      </div>
      <div v-else-if="lslogin === 0"></div>
      <div v-else class="col-6 text-right"  style="padding-top:20px;">
        <router-link :to="{ path: '/login', query: {}}"><button type="button" class="btn btn-light btn-sm">登录</button></router-link>
        <router-link :to="{ path: '/register', query: {}}"><button type="button" class="btn btn-light btn-sm">注册</button></router-link>
      </div>
    </div>

    <ul class="nav nav-pills container" style="padding:1rem 2rem;">
      <li class="nav-item">
        <router-link class="nav-link" :to="{ path: '/', query: {}}">常用网站</router-link>
      </li>

      <li class="nav-item">
        <router-link class="nav-link active" :to="{ path: '/remind', query: {}}">还款提醒</router-link>
      </li>

      <li class="nav-item">
        <router-link class="nav-link" :to="{ path: '/stockindex', query: {}}">大盘指数</router-link>
      </li>

      <li class="nav-item">
        <router-link class="nav-link" :to="{ path: '/news', query: {}}">热门新闻</router-link>
      </li>
    
    </ul>

    <div style="height:20px;background-color:#e9ecef73"></div>

    <!-- <button @click="go">更多指数</button> -->

    <div class="container-fluid container" style="padding:2rem;margin-bottom:5rem;">

      <div v-if="lslogin" class="col-12">
        <p class="text-left">还款管理</p>
        <br>
        <p class="text-right">
          <router-link :to="{ path: '/remind', query: {}}"><button type="button" class="btn btn-light">返回</button></router-link>
        </p>
        <br>
        <div class="form-group text-left col-12">
          <input type="text" class="form-control" :placeholder="form.payment_target" v-model="target">
          <small id="emailHelp" class="form-text text-muted">建议使用银行+银行卡尾号</small>
        </div>
        <div class="form-group text-left col-12">
          	<div class="form-group">
              <select class="form-control" v-model="sele">
                <option  v-bind:key="index"  v-for="(day1, index) in mouth" :value="day1" >{{day1}}号</option>
              </select>
            </div>

          <small id="emailHelp" class="form-text text-muted">每月还款日期</small>
        </div>
        <div class="col-12">
        <button  @click="mod" class="btn btn-primary col-12" style="margin-top:15px">确认修改</button>
        <button  @click="del" class="btn btn-danger col-12" style="margin-top:15px;">删除该还款</button>
        </div>

        <div v-if="alert" class="alert alert-danger small" role="alert">
          {{msg}}
        </div>

      </div>
      <div v-else-if="lslogin === ''" style="margin-top:10rem;">
      </div>
      <div v-else style="margin-top:10rem;">
         <!-- <router-link :to="{ path: '/login', query: {}}"><p>已有账号？ <span style="color:#409eff">登录后可查看</span>></p></router-link> -->
      </div>
     
    </div>

    <!-- foot -->
    <Footer/>

  </div>
</template>

<script>
import Footer from '../../components/Footer.vue'

export default {
  components: {
    Footer
  },
  data () {
    return {
      alert: false,
      msg: '',
      form: {"id":"","payment_date":"","payment_target":""},
      sele: {},
      target: '',
      mouth: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31],
      lslogin: 0,
      token: '',
      userinfo: {},
      nowIndex: [],
      moreIndex: []
    }
  },
  created() {
    this.form.id = this.$route.query.id
    this.form.payment_date = this.$route.query.day
    this.sele = this.form.payment_date
    this.form.payment_target = this.$route.query.target
    this.target = this.form.payment_target

    this.token = JSON.parse(localStorage.getItem('token'))
    this.userinfo = JSON.parse(localStorage.getItem('userinfo'))

    this.axios.get(`${this.config.baseURL}${this.config.port}/user/islogin`, {headers: {'token': JSON.parse(localStorage.getItem('token'))}})
    .then((response) => {
      // console.log('sdsdf', response.data)
      if(response.data.code === 200) {
        this.lslogin = 1
      } else {
        this.lslogin = 2
      }
    })

    // getSite()
    // this.axios.get(`${this.config.baseURL}:${this.config.port}/api/stock_index?id=now_index`).then((response) => {
    //   console.log('sdsdf', response.data.data)
    //   this.nowIndex = response.data.data
    // })
  
  },
  methods: {
    del() {
      this.form.payment_date = this.sele
      this.form.payment_target = this.target
      this.axios.post(`${this.config.baseURL}${this.config.port}/remind/del`, this.form, {headers: {'token': this.token,'user': this.userinfo.username}})
      .then((response) => {
        // console.log('sdsdf', response.data)
        this.msg = response.data.message
        this.alert = true
        if(response.data.code === 200) {
          this.$router.push({path:'/remind'})
        } else {

        }
      })
    },
    mod() {
      this.form.payment_date = this.sele
      this.form.payment_target = this.target
      this.axios.post(`${this.config.baseURL}${this.config.port}/remind/modify`, this.form, {headers: {'token': this.token,'user': this.userinfo.username}})
      .then((response) => {
        // console.log('sdsdf', response.data)
        this.msg = response.data.message
        this.alert = true
        if(response.data.code === 200) {
          this.$router.push({path:'/remind'})
        } else {

        }
      })

    },
    loginout() {
      localStorage.removeItem('token')
      location.reload()
    },
    go () {
      this.$router.push('/moreindex')
    },
  // 注册
  getSite() {
    this.$axios.get('/website/siteList').then(({status,data})=>{
        if(status===200){
          if(data&&data.code === 1){
            console.log('this.middleList', data.data.favorite)
            this.middleList = data.data.favorite

            // setTimeout(()=>{
            //   this.$message.success('取出成功');
            // }, 2300)
          } else if(data&&data.code === 0) {
            this.middleList = data.data
          } else {
            // this.error=data.msg
            // this.$message.error(data.msg);
          }
        }else{
          this.error=`服务器出错`
        }
      })
    }
  }  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  /* color: #42b983; */
  text-decoration:none
}
.card {
   margin-bottom:2rem
}
.nav-link.active {
  background-color: #409eff;
}
.btn-primary {
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
}
</style>
